<template>
  <div
    class="pic"
    :style="currentPicStyleObj"
    @click="onClick"
  >
    <div class="button" :class="playing ? 'pause' : 'play'">
        <IconButton
          :icon="playing ? 'pause': 'play'"
          :class="playing ? 'icon-pause': 'icon-play'" />
    </div>
  </div>
</template>
<script>
import { ref, defineComponent, computed } from 'vue'
import IconButton from './playbutton'

export default defineComponent({
  name: 'thumbnail',
  components: {IconButton},
  emits: ['toggleplay'],
  props: {
    pic: String,
    theme: String,
    playing: {
      type: Boolean,
      default: false,
    },
    enableDrag: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    const { pic, theme } = toRefs(props)
    const dragStartX = ref(0)
    const dragStartY = ref(0)
    const hasMovedSinceMouseDown = ref(false)
    const currentPicStyleObj = computed(() => {
      if (!pic.value) return {}
      return {
        backgroundImage: `url(${pic.value})`,
        backgroundColor: theme.value
      }
    })
    const onClick = () => {
      if (!hasMovedSinceMouseDown.value) {
        emit('toggleplay')
      }
    }
    return {
      hasMovedSinceMouseDown,
      dragStartX,
      dragStartY,
      currentPicStyleObj,
      onClick
    }
  }
})
</script>
